// import React from 'react'
import { NavBar } from 'antd-mobile'
import { useNavigate, useParams, Link } from 'react-router-dom'
import { useEffect, useState } from 'react'
import { loadIllsMoreAPI } from '../Microsurgery/forums'
import { dalImg } from '../utils/tools'
// import second from 'first'



function WzDetail() {
  const nav = useNavigate()
  const params = useParams()
  const [illMore, setIllMore] = useState([])
  // const [desc, setdesc] = useState('')
  // const loadIllMore = async () => {
  //   const resMore = await loadIllsMoreAPI()
  //   setIllMore(resMore.data)
  //   console.log(resMore.data)
  // }

  useEffect(() => {
    // loadIllMore()
    loadIllsMoreAPI(params.data).then((res) => {
      console.log(res)
      setIllMore(res.data.list)
    })
  }, [])

  const back = () => nav("/Microsurgery")
  // Toast.show({
  //   content: '返回',
  //   duration: 400,
  // })

  return (
    <>
      <NavBar onBack={back}>wz项目介绍</NavBar>
      {illMore.map(item => {
        return <div key={1} style={{ width: '100%' }} >
          <h2 style={{ textAlign: "center" }} >{item.name}</h2>
          <h4 style={{ textAlign: "center" }} >{item.desc}</h4>
          <Link to={`/wzdesc/${item.id}`}>
            <div style={{ textAlign: "center" }}>
              <img style={{ width: "600px", }} src={dalImg(item.image)} />
            </div>
          </Link>

        </div>


      })}

      <div dangerouslySetInnerHTML={{ __html: illMore.content }}></div>
    </>


  )
}

export default WzDetail

